<template>
    <div v-cloak>
        <template>
            <div class="align-right">
              <el-form :inline="true" :model="listQuery">
                  <div class="pull-right">
                    <el-form-item>
                        <el-input
                            placeholder="请输入角色名称"
                            clearable
                            v-model="listQuery.name">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="handleSearch" icon="el-icon-search" >搜索</el-button>
                    </el-form-item>
                  </div>
                <div>
                 <el-button type="primary"  icon="plus" @click="add">添加</el-button>
                </div>
              </el-form>
            </div>
            <div class="table-role ">
                <el-table
                    ref="role"
                    :data="tableRole"
                    row-key="id"
                    border
                    @row-click="RowClick"
                    highlight-current-row
                    v-bind:class="{'is-edit': isEdit}"
                    style="width: 100%">

                    <el-table-column align="center" label="序号" width ="100" >
                        <template slot-scope="scope">
                            <span >{{ scope.$index+1 }}</span>
                        </template>
                        </el-table-column>
                    <el-table-column
                    align="center"
                    label="角色名称">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name"></el-input>
                        <span>{{ scope.row.name }}</span>
                    </template>
                    </el-table-column>

                    <el-table-column
                        align="center"
                        label="是否可用"
                        width="">
                        <template slot-scope="scope">
                        <span >{{scope.row.enable?'是':'否'}}</span>
                        <el-select  v-model="scope.row.enable">
                        <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                        </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        width="200px"
                        label="操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.id != 1">
                        <div class="default" >
                            <el-button type="text"  @click="edit(scope)">修改</el-button>
                            <el-button type="text"  @click="configPermission(scope)">配置权限</el-button>
                            <el-button type="text" @click="del(scope)">删除</el-button>
                        </div>
                        <div class="confirm">
                            <el-button type="text" @click="submit(scope)" >确认</el-button>
                            <el-button type="text" @click="cancle(scope)">取消</el-button>
                        </div>
                        </div>
                        <div v-else>
                            <span>不可操作</span>
                        </div>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-col :span="24" class="pagination-warp" v-if="tableRole.length>0">
                    <div class="text-center">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                            :current-page="listQuery.currentPage"
                            :page-sizes="[5, 10, 15, 20]"
                            :page-size="listQuery.size"
                            layout="total, sizes, prev, pager, next ,jumper"
                            :total="total">
                        </el-pagination>
                    </div>
                </el-col>
            </template>
        <template>
            <el-dialog title="权限分配" :visible="dialogPerVisible" :before-close="percancel" center width="30%">
                <div>
                    <el-tree
                        :data="treeData"
                        node-key="id"
                        show-checkbox
                        :check-strictly="true"
                        highlight-current
                        @check-change="checkChange"
                        :props="defaultProps"
                        :expand-on-click-node="false"
                        :render-content="renderContent"
                        ref="menuTree"
                        default-expand-all
                        >
                    </el-tree>
                </div>
                <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogPerVisible = false">取 消</el-button>
                        <el-button type="primary" @click="ok()">确 定</el-button>
                </div>
            </el-dialog>
        </template>
    </div>
</template>

<script>
import { getDetail } from '@/api/sys/detail'
import { getList, insert, update, del, configPermission } from '@/api/sys/role'
import { getResources , getRoleMenu } from '@/api/sys/menu'
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      treeData:[],
      tableRole: [],
      total: null,
      tempRow: {},
      options: [
        {id:1,label:"是",value:1},
        {id:2,label:"否",value:0}
      ],
      isEdit: false,
      adding: false,
      dialogPerVisible:false,
      config: {
          id: undefined,
          menuIds:[]
      },
      listQuery: {
        currentPage: 1,
        size: 10,
        name: "",

      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    renderContent(h, {node, data, store}) {
        return (
        <span>
          <span>
            <span><svg-icon  icon-class={data.icon?data.icon:""}></svg-icon>&nbsp;{node.label}</span>
          </span>
        </span>)
    },
    getList() {
        const params = this.listQuery
        getList(params).then((response) => {
            if (response.code === 0) {
                this.tableRole = response.data.records
                this.total = response.data.total
            }
        })
    },
    handleSearch(){
        this.tableRole = []
        this.listQuery.currentPage = 1
        this.getList()
    },
    handleSizeChange(val) {
        this.listQuery.currentPage = 1
        this.listQuery.size = val
        this.getList()
    },
    handleCurrentChange(val) {
        this.listQuery.currentPage = val
        this.getList()
    },
    RowClick(row, eve ,column) {
            if(row.id === "") return
            if(row.id !== this.tempRow.id) {
                this.isEdit = false
            }
            if (this.adding) {
                this.$nextTick(function () {
                    this.tableRole.splice(0,1)
                })
                this.adding = false
            }
    },
    ok(){
        const menuIds = this.$refs.menuTree.getCheckedKeys();
        this.config.menuIds = menuIds
        configPermission(this.config).then((response) => {
            if(response.code === 0){
                this.dialogPerVisible = false
                this.$message({
                    type: 'success',
                    message:response.msg
                })
            }
        })
    },
    add() {
      if(this.adding) return
      const newRow = {id:"", name:"",enable:1}
      this.tableRole.unshift(newRow)
      this.recoveryHighLight(newRow)
      this.isEdit = true
      this.adding = true
    },
    edit(scope) {
      this.isEdit = true
      this.tempRow = Object.assign({}, this.tempRow, scope.row)
    },
    del(scope) {
        const row = scope.row
        row.delFlag = 1
        this.$confirm('此操作将删除该行数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                 del(row).then((response) => {
                    if(response.code === 0) {
                        this.getList()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    }
                })
            }).catch(() => {

            })
    },
    configPermission(scope) {
      const row = scope.row
      getResources().then(response => {
          if (response.code === 0) {
            this.treeData = response.data
          }
      })
      const param = {"id": row.id}
      getRoleMenu(param).then((response) => {
          if (response.code === 0) {
            this.$refs.menuTree.setCheckedKeys(response.data)
          }

      })
      this.config.id = row.id
      this.dialogPerVisible = true
    },
    submit(scope) {
      const row = scope.row
            if (row.id === "") {
                insert(row).then((response) => {
                    if (response.code === 0) {
                        this.getList()
                        this.isEdit = false
                        this.adding = false
                        this.$message({
                            type: 'success',
                            message: response.msg
                        })
                    }
                })
            } else {
                update(row).then((response) => {
                    if (response.code === 0) {
                        this.getList()
                        this.isEdit = false
                        this.$message({
                            type: 'success',
                            message: response.msg
                        })
                    }
                })
            }
    },
    cancle(scope) {
       const row = scope.row
      if (row.id === "") {
        this.tableRole.splice(0,1)
        this.adding = false
      }
      this.isEdit = false
    },
    recoveryHighLight(row){
      this.$nextTick(function () {
        this.$refs.role.setCurrentRow(row)
      })
    },
    checkChange(node,checked,childChecked){
        if(node.parentId != 0 && checked){
            this.$refs.menuTree.setChecked(node.parentId,true,false)
        }
        if(node.children && !checked){
            node.children.forEach(n => {
                 this.$refs.menuTree.setChecked(n.id,checked,false)
            });

        }else{
            this.$refs.menuTree.setChecked(node.id,checked,false)
        }

    },
    percancel(){
        this.dialogPerVisible = false
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

.table-role .el-input,.el-select,.confirm{
  display: none
}

.is-edit .current-row .default {
    display: none
}
.is-edit .current-row span {
    display: none
}
.is-edit .current-row .confirm{
    display: block;
}
.is-edit .current-row .el-select {
    display: block
}
.is-edit .current-row .el-input {
    display: block
}

</style>
